Flutter এ Styling এবং Theming

Flutter এ Styling এবং Theming হলো অ্যাপ্লিকেশনকে সুন্দর এবং ব্যবহারকারী-বান্ধব করার জন্য ব্যবহৃত কৌশল। এগুলোর মাধ্যমে আপনি অ্যাপের বিভিন্ন UI উপাদানের রঙ, ফন্ট, এবং স্টাইল কাস্টমাইজ করতে পারেন। Styling এবং Theming একত্রে ব্যবহার করে আপনি অ্যাপ্লিকেশনের একটি সামঞ্জস্যপূর্ণ এবং পেশাদার লুক দিতে পারেন।

Styling (স্টাইলিং):

Styling এর মাধ্যমে আপনি পৃথক Widget বা UI উপাদানের স্টাইল নির্ধারণ করতে পারেন, যেমন টেক্সটের ফন্ট, কালার, বাটনের শেপ, ইত্যাদি। Styling সরাসরি Widget এর প্রপার্টি হিসেবে সেট করা যায়।

Styling উদাহরণ:

১. Text Widget Styling:

• Text Widget এর ফন্ট, রঙ, এবং আকার কাস্টমাইজ করতে TextStyle ব্যবহার করা হয়।

Text(
  'Styled Text',
  style: TextStyle(
    fontSize: 24,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
  ),
)

• এখানে fontSize, color, এবং fontWeight প্রপার্টি ব্যবহার করে টেক্সটের স্টাইল নির্ধারণ করা হয়েছে।

২. Container Styling:

• Container এর প্যাডিং, মার্জিন, এবং ডেকোরেশন কাস্টমাইজ করতে BoxDecoration ব্যবহার করা হয়।

Container(
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.all(8.0),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: Text('Styled Container'),
)

• এখানে padding এবং margin প্রপার্টি ব্যবহার করে Container এর ভিতরের ও বাইরের স্পেস নির্ধারণ করা হয়েছে। BoxDecoration ব্যবহার করে ব্যাকগ্রাউন্ড কালার এবং বর্ডার রেডিয়াস দেওয়া হয়েছে।

৩. Button Styling:

• Button Widget এর স্টাইল নির্ধারণ করতে style প্রপার্টি ব্যবহার করা হয়।

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    primary: Colors.green, // Background color
    onPrimary: Colors.white, // Text color
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12.0),
    ),
  ),
  child: Text('Styled Button'),
)

• এখানে primary এবং onPrimary রঙের প্রপার্টি ব্যবহার করে বাটন ও টেক্সটের রঙ নির্ধারণ করা হয়েছে।

Theming (থিমিং):

Theming এর মাধ্যমে আপনি পুরো অ্যাপ্লিকেশনের জন্য একটি সামঞ্জস্যপূর্ণ থিম তৈরি করতে পারেন। ThemeData ব্যবহার করে MaterialApp এর জন্য থিম সেট করা হয়, যা অ্যাপের সব Widget এ প্রযোজ্য হয়। Theming আপনাকে একটি সেন্ট্রাল জায়গা থেকে আপনার অ্যাপের স্টাইলিং কাস্টমাইজ করতে দেয়, যা অ্যাপের কনসিস্টেন্সি বজায় রাখতে সাহায্য করে।

Theming উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Theming Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        accentColor: Colors.amber,
        textTheme: TextTheme(
          bodyText1: TextStyle(fontSize: 18, color: Colors.black),
          headline1: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            onPrimary: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0),
            ),
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theming Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'This is styled using ThemeData!',
              style: Theme.of(context).textTheme.bodyText1,
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text('Styled Button'),
            ),
          ],
        ),
      ),
    );
  }
}

• ThemeData এর মাধ্যমে অ্যাপ্লিকেশনের প্রাথমিক এবং এক্সেন্ট কালার নির্ধারণ করা হয়েছে।
• textTheme এর মাধ্যমে টেক্সটের স্টাইল কাস্টমাইজ করা হয়েছে।
• elevatedButtonTheme এর মাধ্যমে বাটনের থিম কাস্টমাইজ করা হয়েছে।

Theming এর সুবিধা:

• Consistency: পুরো অ্যাপ্লিকেশনে এক ধরনের রঙ এবং স্টাইল ব্যবহার করে সামঞ্জস্য বজায় রাখা যায়।
• Reusability: একবার থিম সেট করলে, তা অ্যাপের সব জায়গায় প্রযোজ্য হয়, ফলে কোড পুনঃব্যবহার করা সহজ হয়।
• Global Control: এক জায়গা থেকে পুরো অ্যাপ্লিকেশনের লুক ও ফিলিং কন্ট্রোল করা যায়।

Dark এবং Light Theme:

Flutter এ আপনি সহজেই Dark এবং Light থিম স্যুইচ করতে পারেন। Dark থিম ব্যবহারকারীর চোখের জন্য আরামদায়ক এবং অনেক অ্যাপ্লিকেশনেই এই ফিচার থাকে।

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system, // Device এর থিম অনুযায়ী পরিবর্তিত হবে
  home: MyHomePage(),
);

• ThemeMode এর মাধ্যমে আপনি থিম স্যুইচ কন্ট্রোল করতে পারেন:
  • ThemeMode.light: সব সময় Light থিম প্রদর্শন করবে।
  • ThemeMode.dark: সব সময় Dark থিম প্রদর্শন করবে।
  • ThemeMode.system: ডিভাইসের সিস্টেম থিম অনুযায়ী পরিবর্তিত হবে।

Flutter এর Styling এবং Theming এর সংক্ষেপে আলোচনা:

• Styling: পৃথক Widget এর স্টাইল কাস্টমাইজ করতে ব্যবহার করা হয়।
• Theming: পুরো অ্যাপ্লিকেশনের জন্য একটি সামঞ্জস্যপূর্ণ থিম তৈরি করতে ব্যবহার করা হয়।
• ThemeData এবং textTheme ব্যবহার করে আপনি সহজেই অ্যাপের প্রাথমিক থিম এবং টেক্সটের স্টাইল কাস্টমাইজ করতে পারেন।
• Dark এবং Light থিম ব্যবহার করে অ্যাপকে ডাইনামিক এবং ব্যবহারকারী-বান্ধব করা যায়।

Flutter এ Styling এবং Theming ব্যবহারের মাধ্যমে একটি সামঞ্জস্যপূর্ণ, সুন্দর, এবং ব্যবহারকারী-বান্ধব UI তৈরি করা যায়।

Flutter-এ টেক্সট এবং ফন্ট স্টাইলিং অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি অ্যাপ্লিকেশনের ভিজ্যুয়াল এফেক্ট এবং পাঠযোগ্যতা উন্নত করতে সাহায্য করে। Flutter-এর Text উইজেট এবং TextStyle ক্লাস ব্যবহার করে বিভিন্ন ধরণের টেক্সট এবং ফন্ট স্টাইলিং করা যায়। নিচে Flutter-এ টেক্সট এবং ফন্ট স্টাইলিংয়ের বিস্তারিত আলোচনা দেওয়া হলো।

১. Text উইজেট

Flutter-এ Text উইজেট ব্যবহার করে আপনি টেক্সট প্রদর্শন করতে পারেন। এটি একটি সাধারণ উইজেট, যা অ্যাপ্লিকেশনের বিভিন্ন স্থানে টেক্সট দেখানোর জন্য ব্যবহৃত হয়।

Text(
  'Hello, Flutter!',
)

২. TextStyle ব্যবহার করে টেক্সট কাস্টমাইজ করা

TextStyle ক্লাস ব্যবহার করে টেক্সটের বিভিন্ন দিক যেমন ফন্ট সাইজ, ফন্ট ওয়েট, ফন্ট ফ্যামিলি, রঙ, এবং আরও অনেক কিছু কাস্টমাইজ করা যায়।

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24, // ফন্টের আকার
    fontWeight: FontWeight.bold, // ফন্টের ওজন
    color: Colors.blue, // ফন্টের রঙ
    fontStyle: FontStyle.italic, // ফন্টের স্টাইল (italic বা normal)
  ),
)

TextStyle-এর প্রপার্টিস

TextStyle ক্লাসের কিছু গুরুত্বপূর্ণ প্রপার্টি:

• fontSize: ফন্টের আকার নির্ধারণ করে (ডিফল্ট আকার: 14.0 পিক্সেল)।
• fontWeight: ফন্টের ওজন বা বোল্ডনেস নির্ধারণ করে (যেমন FontWeight.bold, FontWeight.w600)।
• color: ফন্টের রঙ নির্ধারণ করে।
• fontStyle: ফন্টকে italic বা normal করতে ব্যবহৃত হয়।
• letterSpacing: টেক্সটের প্রতিটি অক্ষরের মধ্যে দূরত্ব নির্ধারণ করে।
• wordSpacing: প্রতিটি শব্দের মধ্যে দূরত্ব সেট করে।
• decoration: টেক্সটের নিচে, উপরে, বা মাধ্যমে লাইন যোগ করতে ব্যবহৃত হয় (যেমন underline, overline, lineThrough)।
• fontFamily: কাস্টম ফন্ট সেট করতে ব্যবহার করা হয়।

উদাহরণ ১: টেক্সট স্টাইলিং

Text(
  'Stylized Text',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.w500,
    color: Colors.deepPurple,
    letterSpacing: 2.0,
    wordSpacing: 5.0,
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)

৩. কাস্টম ফন্ট ব্যবহার করা

Flutter-এ আপনি কাস্টম ফন্ট যোগ করে Text উইজেটগুলোতে ব্যবহার করতে পারেন। এটি অ্যাপ্লিকেশনের ব্র্যান্ডিং এবং ভিজ্যুয়াল স্টাইল উন্নত করতে সাহায্য করে।

ধাপ ১: ফন্ট ফাইল যোগ করা

1. প্রজেক্টের pubspec.yaml ফাইলে ফন্ট ফাইল অ্যাড করতে হবে। assets/fonts/ ডিরেক্টরি তৈরি করে সেখানে ফন্ট ফাইল রাখুন।
2. pubspec.yaml ফাইলে নিচের কোড যোগ করুন:
   • এখানে CustomFont হলো ফন্ট ফ্যামিলির নাম এবং ফন্ট ফাইলগুলো আলাদাভাবে উল্লেখ করা হয়েছে।

flutter:
  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont-Regular.ttf
        - asset: assets/fonts/CustomFont-Bold.ttf
          weight: 700

ধাপ ২: কাস্টম ফন্ট ব্যবহার করা

Text(
  'This is custom font!',
  style: TextStyle(
    fontFamily: 'CustomFont',
    fontSize: 24,
  ),
)

৪. থিমের মাধ্যমে ফন্ট স্টাইলিং করা

Flutter-এ ThemeData ব্যবহার করে গ্লোবালি টেক্সট এবং ফন্টের স্টাইল সেট করা যায়, যা পুরো অ্যাপ্লিকেশনে প্রয়োগ হয়।

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText1: TextStyle(fontSize: 18, color: Colors.black),
      headline1: TextStyle(fontSize: 32, fontWeight: FontWeight.bold, color: Colors.blue),
    ),
  ),
  home: Scaffold(
    appBar: AppBar(title: Text('Themed App')),
    body: Center(
      child: Column(
        children: [
          Text('This is body text', style: Theme.of(context).textTheme.bodyText1),
          Text('This is headline', style: Theme.of(context).textTheme.headline1),
        ],
      ),
    ),
  ),
)

• TextTheme: বিভিন্ন ধরনের টেক্সট স্টাইল (যেমন bodyText1, headline1, caption) সেট করতে ব্যবহার করা হয়।
• থিম ব্যবহার করে টেক্সট স্টাইল সেট করলে তা অ্যাপ্লিকেশনের বিভিন্ন স্থানে পুনরায় ব্যবহার করা যায়, যা কোডকে সংগঠিত এবং পুনঃব্যবহারযোগ্য করে তোলে।

৫. TextAlign এবং TextDirection ব্যবহার করা

Flutter-এ টেক্সটের বিন্যাস নিয়ন্ত্রণ করতে TextAlign এবং TextDirection প্রপার্টি ব্যবহার করা যায়।

• TextAlign: টেক্সটের অভ্যন্তরে অক্ষরগুলোর সারিবদ্ধতা নির্ধারণ করে। যেমন: TextAlign.left, TextAlign.center, TextAlign.right।
• TextDirection: টেক্সটের দিক নির্ধারণ করে (LTR বা RTL)।

Text(
  'Center Aligned Text',
  textAlign: TextAlign.center,
  style: TextStyle(fontSize: 20),
)

Text(
  'Right to Left Text',
  textDirection: TextDirection.rtl,
  style: TextStyle(fontSize: 20),
)

৬. RichText উইজেট ব্যবহার করা

RichText উইজেট ব্যবহার করে আপনি একাধিক টেক্সট স্টাইল এবং ফরম্যাট একসঙ্গে প্রয়োগ করতে পারেন। এটি কাস্টমাইজড টেক্সট তৈরি করার জন্য খুবই কার্যকর।

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 24, color: Colors.black),
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' and '),
      TextSpan(text: 'italic', style: TextStyle(fontStyle: FontStyle.italic)),
    ],
  ),
)

• RichText উইজেটের মাধ্যমে টেক্সটের বিভিন্ন অংশে আলাদা আলাদা স্টাইল প্রয়োগ করা যায়।

Flutter-এ টেক্সট এবং ফন্ট স্টাইলিংয়ের সংক্ষেপে:

• Text উইজেট ব্যবহার করে টেক্সট প্রদর্শন করা হয়।
• TextStyle ব্যবহার করে টেক্সটের ফন্ট সাইজ, ওজন, রঙ, এবং আরও অনেক কিছু কাস্টমাইজ করা যায়।
• কাস্টম ফন্ট যোগ করে অ্যাপ্লিকেশনকে ব্র্যান্ডিং এবং ভিজ্যুয়াল স্টাইলের সাথে মিলিয়ে নিতে পারেন।
• ThemeData ব্যবহার করে গ্লোবালি ফন্ট স্টাইল সেট করতে পারেন, যা কোড পুনঃব্যবহারযোগ্য এবং পরিচালনাযোগ্য করে।
• RichText উইজেট ব্যবহার করে কাস্টমাইজড এবং স্টাইল করা টেক্সট তৈরি করতে পারেন।

এভাবে, Flutter-এ Text এবং Font Styling নিয়ে কাজ করা যায়, যা অ্যাপ্লিকেশনের ডিজাইন এবং ভিজ্যুয়াল এক্সপ্রেশানকে আরও উন্নত করে।

Flutter এ Colors, Padding, এবং Margins কনফিগার করা UI ডিজাইন এবং স্টাইলিংয়ের জন্য গুরুত্বপূর্ণ। এগুলো ব্যবহার করে Widget এর স্টাইল এবং অবস্থান নির্ধারণ করা যায়। নিচে প্রতিটি কনফিগারেশনের বিস্তারিত ব্যাখ্যা এবং উদাহরণ দেওয়া হলো:

১. Colors (রঙ):

Flutter এ রঙ কনফিগার করতে Colors ক্লাস ব্যবহার করা হয়। এটি Flutter এর Material ডিজাইন লাইব্রেরির একটি অংশ এবং এতে বিভিন্ন রঙের প্রিসেট রয়েছে। আপনি সরাসরি রঙ ব্যবহার করতে পারেন, বা কাস্টম রঙ তৈরি করতে পারেন।

Colors ব্যবহার করার উদাহরণ:

Container(
  color: Colors.blue, // প্রিসেট রঙ
  width: 100,
  height: 100,
  child: Center(
    child: Text(
      'Blue Box',
      style: TextStyle(color: Colors.white), // টেক্সটের রঙ
    ),
  ),
)

• এখানে Container এর ব্যাকগ্রাউন্ড কালার হিসেবে Colors.blue সেট করা হয়েছে।
• টেক্সটের রঙ হিসেবে Colors.white সেট করা হয়েছে।

Custom Colors ব্যবহার করা:

Container(
  color: Color(0xFF42A5F5), // Hex কোড ব্যবহার করে কাস্টম রঙ
  width: 100,
  height: 100,
  child: Center(
    child: Text(
      'Custom Color',
      style: TextStyle(color: Color(0xFFFFFFFF)), // কাস্টম হেক্স কালার
    ),
  ),
)

• এখানে Color(0xFF42A5F5) ব্যবহার করে একটি কাস্টম রঙ তৈরি করা হয়েছে, যা Container এর ব্যাকগ্রাউন্ডে ব্যবহার করা হয়েছে।

২. Padding (প্যাডিং):

• Padding হলো Widget এর ভেতরে থাকা কনটেন্ট এবং Widget এর বর্ডার বা কিনারার মধ্যে থাকা জায়গা। Padding ব্যবহার করে আপনি Widget এর ভেতরে স্পেস তৈরি করতে পারেন।
• Flutter এ Padding Widget বা Container এর padding প্রপার্টি ব্যবহার করে প্যাডিং সেট করা যায়।

Padding Widget ব্যবহার করার উদাহরণ:

Padding(
  padding: EdgeInsets.all(20), // সব পাশে সমান প্যাডিং
  child: Text('Hello with Padding'),
)

• এখানে Padding Widget এর মাধ্যমে চারপাশে ২০ পিক্সেল সমান প্যাডিং দেওয়া হয়েছে।
• EdgeInsets.all(20) ব্যবহার করে প্যাডিং সেট করা হয়েছে।

EdgeInsets এর বিভিন্ন অপশন:

• EdgeInsets.only(left: 10, right: 20): শুধুমাত্র বাম এবং ডান পাশে প্যাডিং।
• EdgeInsets.symmetric(vertical: 10, horizontal: 20): উল্লম্ব (vertical) এবং অনুভূমিক (horizontal) প্যাডিং।
• EdgeInsets.fromLTRB(10, 20, 30, 40): বাম, উপরে, ডান এবং নিচে পৃথকভাবে প্যাডিং।

Container এর padding প্রপার্টি ব্যবহার করা:

Container(
  padding: EdgeInsets.all(15),
  color: Colors.green,
  child: Text('Container with Padding'),
)

• এখানে Container এর মধ্যে padding প্রপার্টি ব্যবহার করে চারপাশে ১৫ পিক্সেল প্যাডিং দেওয়া হয়েছে।

৩. Margin (মার্জিন):

• Margin হলো Widget এর বাইরের স্পেস, যা Widget এর চারপাশে থাকা অন্য Widget বা প্যারেন্ট Widget থেকে দূরত্ব নির্ধারণ করে। Container এর margin প্রপার্টি ব্যবহার করে Flutter এ মার্জিন সেট করা যায়।

Container এ Margin ব্যবহার করার উদাহরণ:

Container(
  margin: EdgeInsets.all(20), // সব পাশে সমান মার্জিন
  padding: EdgeInsets.all(10),
  color: Colors.red,
  child: Text('Container with Margin'),
)

• এখানে Container এর চারপাশে ২০ পিক্সেল সমান মার্জিন দেওয়া হয়েছে।
• padding এবং margin উভয় ব্যবহার করে একটি সুন্দর লেআউট তৈরি করা হয়েছে।

EdgeInsets এর বিভিন্ন অপশন:

• EdgeInsets.only(top: 10, bottom: 20): শুধুমাত্র উপরে এবং নিচে মার্জিন।
• EdgeInsets.symmetric(vertical: 10, horizontal: 20): উল্লম্ব (vertical) এবং অনুভূমিক (horizontal) মার্জিন।
• EdgeInsets.fromLTRB(10, 20, 30, 40): বাম, উপরে, ডান এবং নিচে পৃথকভাবে মার্জিন।

Colors, Padding, এবং Margin একত্রে ব্যবহার করা:

• Container এর মধ্যে color, padding, এবং margin একত্রে ব্যবহার করে একটি সুন্দর লেআউট তৈরি করা যায়।

উদাহরণ:

Container(
  margin: EdgeInsets.all(20),
  padding: EdgeInsets.all(15),
  decoration: BoxDecoration(
    color: Colors.orange,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text(
    'Styled Container',
    style: TextStyle(color: Colors.white),
  ),
)

• এখানে:
  • margin দিয়ে Container এর চারপাশে স্পেস রাখা হয়েছে।
  • padding দিয়ে Container এর ভেতরে থাকা কনটেন্টের চারপাশে স্পেস রাখা হয়েছে।
  • decoration প্রপার্টি ব্যবহার করে একটি ব্যাকগ্রাউন্ড কালার এবং বর্ডার রেডিয়াস সেট করা হয়েছে।

সংক্ষেপে:

• Colors: রঙ কনফিগার করার জন্য Colors ক্লাস ব্যবহার করা হয়।
• Padding: Widget এর ভেতরে স্পেস তৈরি করতে Padding Widget বা Container এর padding প্রপার্টি ব্যবহার করা হয়।
• Margin: Widget এর বাইরের স্পেস নির্ধারণ করতে Container এর margin প্রপার্টি ব্যবহার করা হয়।

Flutter এ Colors, Padding, এবং Margins ব্যবহার করে Widget গুলোকে স্টাইল এবং লেআউট কনফিগার করা যায়, যা UI তৈরি এবং কাস্টমাইজেশনে বিশেষভাবে সহায়ক।

Flutter এ Custom Themes তৈরি এবং ব্যবহার করে আপনি অ্যাপ্লিকেশনের জন্য একটি ইউনিক এবং কনসিস্টেন্ট লুক ও ফিল তৈরি করতে পারেন। Custom Themes আপনাকে আপনার অ্যাপের বিভিন্ন UI উপাদানের রঙ, ফন্ট, এবং স্টাইল কাস্টমাইজ করার সুযোগ দেয় এবং এটি একটি সেন্ট্রাল জায়গা থেকে নিয়ন্ত্রণ করা যায়।

Custom Theme তৈরি করার ধাপসমূহ:

Flutter এ Custom Theme তৈরি করার জন্য, ThemeData ব্যবহার করে আপনার অ্যাপের জন্য নির্দিষ্ট রঙ, ফন্ট, এবং অন্যান্য স্টাইল কনফিগার করতে হবে। নিচে Custom Theme তৈরি এবং ব্যবহারের ধাপগুলো দেয়া হলো।

১. ThemeData ডিফাইন করা:

আপনার অ্যাপের জন্য ThemeData ডিফাইন করে বিভিন্ন প্রপার্টি সেট করতে হবে, যেমন প্রাথমিক রঙ, ফন্ট, বাটনের থিম, ইত্যাদি।

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Theme Example',
      theme: ThemeData(
        primaryColor: Colors.teal,
        accentColor: Colors.orange,
        backgroundColor: Colors.white,
        textTheme: TextTheme(
          bodyText1: TextStyle(fontSize: 18, color: Colors.black),
          headline1: TextStyle(
            fontSize: 36,
            fontWeight: FontWeight.bold,
            color: Colors.teal,
          ),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.teal,
            onPrimary: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12.0),
            ),
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Theme Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'This text is styled using the custom theme!',
              style: Theme.of(context).textTheme.bodyText1,
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text('Styled Button'),
            ),
          ],
        ),
      ),
    );
  }
}

উপরে দেয়া কোডের ব্যাখ্যা:

• primaryColor এবং accentColor: অ্যাপের প্রাথমিক এবং এক্সেন্ট রঙ নির্ধারণ করা হয়েছে। এগুলো বিভিন্ন UI উপাদানে প্রয়োগ হবে, যেমন অ্যাপবার, বাটন ইত্যাদি।
• textTheme: অ্যাপ্লিকেশনের টেক্সট স্টাইল কাস্টমাইজ করার জন্য ব্যবহার করা হয়েছে। এখানে bodyText1 এবং headline1 টেক্সটের ফন্ট সাইজ, রঙ এবং ওজন নির্ধারণ করা হয়েছে।
• elevatedButtonTheme: বাটনের জন্য স্টাইল কাস্টমাইজ করা হয়েছে, যাতে বাটনগুলোর ব্যাকগ্রাউন্ড রঙ, টেক্সটের রঙ এবং বর্ডার রেডিয়াস নির্ধারণ করা যায়।

২. Custom Theme ব্যবহার করা:

Flutter এ Theme.of(context) ব্যবহার করে অ্যাপের বিভিন্ন জায়গায় Custom Theme এর প্রপার্টিগুলো অ্যাক্সেস করতে পারবেন।

Text(
  'Hello, World!',
  style: Theme.of(context).textTheme.headline1,
),

• উপরের উদাহরণে, Theme.of(context).textTheme.headline1 ব্যবহার করে অ্যাপের থিমে নির্ধারিত headline1 স্টাইল অ্যাক্সেস করা হয়েছে।

৩. Custom Dark Theme তৈরি করা:

Flutter এ আপনি Custom Light এবং Dark Theme উভয়ই তৈরি করতে পারেন। এতে ব্যবহারকারীরা তাদের ডিভাইসের থিম অনুযায়ী অ্যাপের লুক ও ফিল পরিবর্তন করতে পারে।

MaterialApp(
  theme: ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.teal,
    accentColor: Colors.orange,
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.teal,
    accentColor: Colors.orange,
  ),
  themeMode: ThemeMode.system, // ডিভাইসের সিস্টেম থিম অনুযায়ী পরিবর্তিত হবে
  home: MyHomePage(),
);

• theme: লাইট থিমের জন্য ThemeData নির্ধারণ করা হয়েছে।
• darkTheme: ডার্ক থিমের জন্য ThemeData নির্ধারণ করা হয়েছে।
• themeMode: ডিভাইসের সিস্টেম থিম অনুযায়ী অ্যাপের থিম পরিবর্তিত হবে।

৪. Custom Color Scheme ব্যবহার:

Flutter এ colorScheme ব্যবহার করে আপনি আরো বিস্তারিতভাবে রঙের সেট কনফিগার করতে পারেন।

ThemeData(
  colorScheme: ColorScheme(
    primary: Colors.teal,
    primaryVariant: Colors.teal[700]!,
    secondary: Colors.orange,
    secondaryVariant: Colors.orange[700]!,
    surface: Colors.white,
    background: Colors.grey[200]!,
    error: Colors.red,
    onPrimary: Colors.white,
    onSecondary: Colors.black,
    onSurface: Colors.black,
    onBackground: Colors.black,
    onError: Colors.white,
    brightness: Brightness.light,
  ),
);

• colorScheme এর মাধ্যমে আপনি প্রাথমিক রঙ, সেকেন্ডারি রঙ, ব্যাকগ্রাউন্ড রঙ, এবং অন্যান্য বিভিন্ন রঙের জন্য কনফিগারেশন করতে পারবেন।

৫. Custom ThemeExtension ব্যবহার:

Flutter 2.10 থেকে ThemeExtension এর মাধ্যমে কাস্টম থিম আইটেম যোগ করার সুবিধা রয়েছে।

class MyThemeExtension extends ThemeExtension<MyThemeExtension> {
  final Color customColor;

  MyThemeExtension({required this.customColor});

  @override
  MyThemeExtension copyWith({Color? customColor}) {
    return MyThemeExtension(
      customColor: customColor ?? this.customColor,
    );
  }

  @override
  MyThemeExtension lerp(ThemeExtension<MyThemeExtension>? other, double t) {
    if (other is! MyThemeExtension) return this;
    return MyThemeExtension(
      customColor: Color.lerp(customColor, other.customColor, t)!,
    );
  }
}

• MyThemeExtension দিয়ে আপনি আপনার অ্যাপের জন্য কাস্টম থিম প্রপার্টি তৈরি করতে পারবেন, যেমন একটি নির্দিষ্ট কাস্টম রঙ।

Custom Theme ব্যবহারের সুবিধা:

• Consistency: একবার থিম কনফিগার করলে, তা অ্যাপের সব জায়গায় প্রযোজ্য হয়, ফলে সামঞ্জস্য বজায় থাকে।
• Reusability: কাস্টম থিম একবার ডিফাইন করে অ্যাপের যেকোনো জায়গায় সহজেই ব্যবহার করা যায়।
• Maintainability: অ্যাপের থিম একটি কেন্দ্রীয় জায়গা থেকে নিয়ন্ত্রণ করা যায়, ফলে পরিবর্তন করা সহজ হয়।

Custom Themes ব্যবহার করে Flutter এ একটি ইউনিক এবং সামঞ্জস্যপূর্ণ UI তৈরি করা যায়, যা অ্যাপ্লিকেশনকে আরো পেশাদার এবং ব্যবহারকারী-বান্ধব করে তোলে।

Flutter-এ Dark Mode এবং Light Mode সাপোর্ট করা খুব সহজ, এবং এটি অ্যাপ্লিকেশনের ব্যবহারকারীদের জন্য একটি গুরুত্বপূর্ণ ফিচার। আপনি Flutter এর ThemeData এবং MediaQuery ব্যবহার করে Dynamic Theme সাপোর্ট করতে পারেন, যাতে অ্যাপ্লিকেশন ডিভাইসের থিম পরিবর্তন অনুযায়ী স্বয়ংক্রিয়ভাবে রঙ পরিবর্তন করে। নিচে Flutter-এ Dark Mode এবং Light Mode সাপোর্ট করার বিস্তারিত প্রক্রিয়া দেওয়া হলো:

১. ThemeData ব্যবহার করা

Flutter-এ ThemeData ব্যবহার করে অ্যাপ্লিকেশনের জন্য ডার্ক এবং লাইট থিম ডিফাইন করা যায়। ThemeData অ্যাপ্লিকেশনের রঙ, টেক্সট স্টাইল, এবং অন্যান্য ভিজ্যুয়াল উপাদান কাস্টমাইজ করতে সাহায্য করে।

উদাহরণ: ডার্ক এবং লাইট মোড সাপোর্ট

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Demo',
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.white,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.black,
      ),
      themeMode: ThemeMode.system, // ডিভাইসের থিম অনুযায়ী পরিবর্তন হবে
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dark and Light Mode'),
      ),
      body: Center(
        child: Text('Hello, Flutter!'),
      ),
    );
  }
}

কোডের ব্যাখ্যা

1. theme: এখানে লাইট মোডের জন্য থিম ডিফাইন করা হয়েছে, যেখানে brightness: Brightness.light এবং অন্যান্য প্রপার্টি লাইট থিম অনুযায়ী সেট করা হয়েছে।
2. darkTheme: ডার্ক মোডের জন্য থিম ডিফাইন করা হয়েছে, যেখানে brightness: Brightness.dark এবং ব্যাকগ্রাউন্ড কালার ব্ল্যাক সেট করা হয়েছে।
3. themeMode: ThemeMode.system সেট করা হয়েছে, যা ডিভাইসের সিস্টেম থিম অনুযায়ী অ্যাপ্লিকেশনের থিম পরিবর্তন করবে। এছাড়া, আপনি ThemeMode.light (সবসময় লাইট মোড) বা ThemeMode.dark (সবসময় ডার্ক মোড) সেট করতে পারেন।

২. MediaQuery ব্যবহার করে থিম সনাক্ত করা

Flutter-এ MediaQuery ব্যবহার করে বর্তমান থিম সনাক্ত করা এবং কাস্টম থিম তৈরি করা যায়। MediaQuery থেকে platformBrightness প্যারামিটার ব্যবহার করে আপনি ডিভাইসের থিম যাচাই করতে পারেন।

import 'package:flutter/material.dart';

class CustomThemeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // ডিভাইসের বর্তমান থিম সনাক্ত করা হচ্ছে
    var brightness = MediaQuery.of(context).platformBrightness;
    bool isDarkMode = brightness == Brightness.dark;

    return MaterialApp(
      title: 'Custom Theme Demo',
      theme: isDarkMode
          ? ThemeData.dark().copyWith(
              primaryColor: Colors.grey[800],
            )
          : ThemeData.light().copyWith(
              primaryColor: Colors.blue,
            ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Dark/Light Mode'),
      ),
      body: Center(
        child: Text('MediaQuery Dark/Light Mode Detection!'),
      ),
    );
  }
}

কোডের ব্যাখ্যা

• MediaQuery এর মাধ্যমে ডিভাইসের বর্তমান থিম (platformBrightness) সনাক্ত করা হয়েছে।
• isDarkMode চেক করা হচ্ছে ডার্ক থিম সক্রিয় আছে কিনা। এরপর, ThemeData.dark() বা ThemeData.light() অনুযায়ী থিম সেট করা হচ্ছে।

৩. Dynamic Theme পরিবর্তন করা (Toggle Feature)

আপনি চাইলে ব্যবহারকারীদের থিম পরিবর্তন করার সুবিধা দিতে পারেন। এক্ষেত্রে, একটি StatefulWidget ব্যবহার করে ব্যবহারকারীর পছন্দ অনুযায়ী Dynamic Theme পরিবর্তন করা যায়।

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isDarkMode = false;

  void _toggleTheme() {
    setState(() {
      _isDarkMode = !_isDarkMode;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      themeMode: _isDarkMode ? ThemeMode.dark : ThemeMode.light,
      home: HomePage(toggleTheme: _toggleTheme),
    );
  }
}

class HomePage extends StatelessWidget {
  final VoidCallback toggleTheme;

  HomePage({required this.toggleTheme});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Dark/Light Mode'),
        actions: [
          IconButton(
            icon: Icon(Icons.brightness_6),
            onPressed: toggleTheme,
          )
        ],
      ),
      body: Center(
        child: Text('Click the icon to toggle theme!'),
      ),
    );
  }
}

কোডের ব্যাখ্যা

• এখানে একটি StatefulWidget ব্যবহার করা হয়েছে, যেখানে _isDarkMode ভেরিয়েবলটি থিমের অবস্থা ট্র্যাক করে।
• _toggleTheme() মেথড ব্যবহার করে থিম পরিবর্তন করা হয় এবং setState ব্যবহার করে UI আপডেট করা হয়।
• IconButton এর মাধ্যমে ব্যবহারকারীরা থিম পরিবর্তন করতে পারেন।

Dark Mode এবং Light Mode সাপোর্ট করার সাধারণ টিপস

1. সঠিক রঙের প্যালেট ব্যবহার করুন: Dark Mode এবং Light Mode এর জন্য আলাদা রঙের প্যালেট ব্যবহার করুন, যা রাতের এবং দিনের আলোর জন্য মানানসই।
2. Transparency এবং Opacity: ডার্ক মোডে পারদর্শিতা এবং অপাসিটি কম ব্যবহার করুন, কারণ এটি চোখের উপর কম চাপ দেয়।
3. থিমের সাথে সাথে আইকন এবং টেক্সট স্টাইল পরিবর্তন করুন: থিম পরিবর্তন হলে টেক্সট এবং আইকনের রঙ বা স্টাইল সামঞ্জস্য করুন।
4. Flutter এর থিম কনফিগারেশন: ThemeData ব্যবহার করে গ্লোবাল থিম কনফিগারেশন সেট করা ভালো প্র্যাকটিস।

সংক্ষেপে

Flutter-এ Dark Mode এবং Light Mode সাপোর্ট করা সহজ এবং প্রয়োজনীয়। ThemeData, MediaQuery, এবং Dynamic Toggle অপশন ব্যবহার করে আপনি ব্যবহারকারীদের একটি স্মার্ট এবং ফ্লেক্সিবল UI অভিজ্ঞতা দিতে পারেন।